<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function replaceNode() {
            let oldNode = document.querySelector("li");
            let replace = document.createElement("span");
            let father = document.querySelector("#list");
            replace.innerHTML="这是替换的内容";
            replace.style.color="red";
            father.replaceChild(replace,oldNode);
        }
    </script>
</head>
<body>
<div>
    <ul id="list">
        <li>A</li>
        <li>B</li>
        <li id="cl">C</li>
        <li>D</li>
    </ul>
</div>
<button onclick="replaceNode()">点击替换</button>
</body>
</html>